<template>
    <div style="height:100%">
        <div ref="chartDiv" style="width: 100%; height: 100%;z-index: 100;"></div>
        <Dialog3 v-if="dialogShow3" />
        <Dialog5 v-if="dialogShow5" />
        <Dialog6 v-if="dialogShow6" />
        <Dialog4 />
    </div>
</template>


<script>
// 引入 ECharts
import * as echarts from 'echarts';
import Dialog3 from "@/views/xd/components/dialog/dialog3.vue";
import Dialog5 from "@/views/xd/components/dialog/dialog3-1.vue";
import Dialog6 from "@/views/xd/components/dialog/dialog3-2.vue";
import Dialog4 from "@/views/xd/components/dialog/dialog4.vue";
export default {
    name: 'ForceGraph',
    components: { Dialog3, Dialog4, Dialog5, Dialog6 },
    data() {
        return {
            dialogShow3: false,
            dialogShow5: false,
            dialogShow6: false,
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 你的初始化代码
            const myChart = echarts.init(this.$refs.chartDiv);
            let that = this;
            const graph = {
                "nodes": [{
                    "name": "受保护设备",
                    "value": [
                    ],
                    "category": "0",
                    "symbolSize": 130,
                    "label": {
                        // "color": "#FFFFFF",
                        // "fontSize": 20,
                        "normal": {
                            "show": true,
                            "textStyle": {
                                "color": "#FFFFFF",
                                "fontSize": 20,
                                "fontFamily": "Arial", // 设置字体类型
                                "fontWeight": "bold", // 设置字体加粗
                                "fontStyle": "italic" // 设置字体斜体
                            }
                        }
                    },
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "国防科技大学",
                    "category": "1-1",
                    "value": [
                    ],
                    "symbolSize": 90,
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "中国农业大学",
                    "category": "1-2",
                    "symbolSize": 90,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "合肥工业大学",
                    "category": "1-3",
                    "symbolSize": 90,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "软件学院",
                    "category": "2",
                    "symbolSize": 60,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "系统工程学院",
                    "category": "2",
                    "symbolSize": 60,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "服务器",
                    "category": "3",
                    "symbolSize": 40,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "路由器",
                    "category": "3",
                    "symbolSize": 40,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                {
                    "name": "PC",
                    "category": "3",
                    "symbolSize": 40,
                    "value": [
                    ],
                    "tooltip": {
                        "formatter": "{b0}"
                    }
                },
                ],
                "links": [{
                    "source": "受保护设备",
                    "target": "国防科技大学",
                    label: {
                        normal: {
                            show: true,
                            position: 'middle',
                            formatter: (params) => params.data.value || '90%', // 使用箭头函数来动态显示数字
                            textStyle: {
                                color: 'red', // 文本颜色
                                fontSize: 25, // 字体大小
                                fontWeight: 'bold', // 字体粗细
                            }
                        }
                    }
                },
                {
                    "source": "受保护设备",
                    "target": "中国农业大学",
                    label: {
                        normal: {
                            show: true,
                            position: 'middle',
                            formatter: '65%',
                            color: 'orange', // 设置文本颜色为红色
                            fontSize: 25, // 设置字体大小
                            fontweight: 'bold', // 设置字体粗细

                        }
                    }
                },
                {
                    "source": "受保护设备",
                    "target": "合肥工业大学",
                    label: {
                        normal: {
                            show: true,
                            position: 'middle',
                            formatter: '25%',
                            color: '#00ff00', // 设置文本颜色为红色
                            fontSize: 25, // 设置字体大小
                            fontweight: 'bold', // 设置字体粗细
                        }
                    }
                },
                {
                    "source": "国防科技大学",
                    "target": "软件学院"
                },
                {
                    "source": "国防科技大学",
                    "target": "系统工程学院"
                },
                {
                    "source": "软件学院",
                    "target": "服务器"
                },
                {
                    "source": "软件学院",
                    "target": "路由器"
                },
                {
                    "source": "软件学院",
                    "target": "PC"
                },
                ]
            };
            const defaultCategory = "0";
            const graphTitle = "";
            const currentGraph = {
                nodes: {},
                links: {},
            };
            const nodeMap = {};


            function init() {
                // 根据定义的常量，产生currentGraph的默认数据
                // 遍历全部nodes和links，产生node映射map


                for (let i = 0; i < graph.nodes.length; i++) {
                    if (graph.nodes[i].category === defaultCategory) {
                        currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i];
                    }
                    nodeMap[graph.nodes[i].name] = graph.nodes[i];
                    nodeMap[graph.nodes[i].name]['links'] = {};
                    nodeMap[graph.nodes[i].name]['nodes'] = {};
                    nodeMap[graph.nodes[i].name]['hasAppend'] = false;
                }
                for (let i = 0; i < graph.links.length; i++) {
                    let link = graph.links[i];
                    if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
                        nodeMap[link.source].links[link.target] = link;
                        nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
                    }
                }

                for (let i = 0; i < graph.nodes.length; i++) {
                    graph.nodes[i].itemStyle = null;
                    graph.nodes[i].label = {
                        normal: {
                            show: graph.nodes[i].symbolSize > 15
                        }
                    };
                }
                redrawGraph();

            }
            // 处理点击节点展开
            function append(nodeName) {
                // 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
                let node = nodeMap[nodeName];
                if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) {
                    // alert("无法继续展开");
                    // this.dialogShow3 = true;
                    return
                }
                Object.values(node.nodes).forEach(n => {
                    currentGraph.nodes[n.name] = n;
                });
                Object.values(node.links).forEach(l => {
                    currentGraph.links[l.source + "_" + l.target] = l;
                });
                node.hasAppend = true;
                redrawGraph();
            }
            // 处理点击节点收缩
            function remove(nodeName) {
                //根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归
                let node = nodeMap[nodeName];
                Object.values(node.nodes).forEach(n => {
                    delete currentGraph.nodes[n.name];
                    if (n.hasAppend === true && Object.keys(n.nodes).length > 0) {
                        remove(n.name);
                    }
                });
                Object.values(node.links).forEach(l => {
                    delete currentGraph.links[l.source + '_' + l.target];
                });
                // 设置flag 等于false
                node.hasAppend = false;

                redrawGraph();
            }
            // 根据更新后的option重新画图
            function redrawGraph() {
                option.series[0].data = Object.values(currentGraph.nodes);
                option.series[0].links = Object.values(currentGraph.links);
                console.log(option);
                myChart.setOption(option);
            }
            // 定义 option
            const option = {
                title: {
                    text: graphTitle,
                    top: 'top',
                    left: 'center',
                },
                tooltip: {},
                legend: [],
                animation: false,
                series: [{
                    type: 'graph',
                    layout: 'force',
                    data: Object.values(currentGraph.nodes),
                    links: Object.values(currentGraph.links),
                    categories: [{
                        name: '0',
                        itemStyle: {
                            color: '#fe4645'
                        },

                    },

                    {
                        name: '1-1',
                        itemStyle: {
                            color: '#fea51d'
                        },

                    },
                    {
                        name: '1-2',
                        itemStyle: {
                            color: '#1272ec'
                        },

                    },
                    {
                        name: '1-3',
                        itemStyle: {
                            color: '#28a8fa'
                        },
                    },
                    {
                        name: '2',
                        itemStyle: {
                            color: '#DEB887'
                        },
                    },
                    {
                        name: '3',
                        itemStyle: {
                            color: '#4354e1'
                        },

                    }
                    ],
                    roam: true,
                    focusNodeAdjacency: false,
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    },
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    lineStyle: {
                        color: 'target',
                        // opacity: 0.6,
                        curveness: 0
                        // 弯曲
                    },
                    emphasis: {
                        lineStyle: {
                            width: 10
                        }
                    },
                    force: {
                        layoutAnimation: false,
                        // 斥力
                        repulsion: 3000
                    }
                }]
            };
            init();
            myChart.on('click', function (params) {
                if (params.dataType === "node") {
                    const nodeName = params.data.name;
                    const node = nodeMap[nodeName];
                    if (nodeName === "PC") {
                        if (that.dialogShow3) {
                            that.dialogShow3 = false;
                        } else {
                            that.dialogShow3 = true;
                            that.dialogShow5 = false;
                            that.dialogShow6 = false;
                        }
                    }
                    if (nodeName === "路由器") {
                        if (that.dialogShow5) {
                            that.dialogShow5 = false;
                        } else {
                            that.dialogShow5 = true;
                            that.dialogShow3 = false;
                            that.dialogShow6 = false;
                        }
                    }
                    if (nodeName === "服务器") {
                        if (that.dialogShow6) {
                            that.dialogShow6 = false;
                        } else {
                            that.dialogShow6 = true;
                            that.dialogShow3 = false;
                            that.dialogShow5 = false;
                        }
                    }
                    else {
                        if (node.hasAppend === true) {
                            remove(node.name);
                        } else {
                            append(node.name);
                        }
                    }
                }
            });

            myChart.setOption(option);
        }
    }
};
</script>
